<template>
  <div class="detail">
    <el-form ref="historyRiskRef" :model="form" label-width="150px"
      style="padding:0 40px 0px 20px;border:none;outline:none">
      <el-row>
        <el-col :span="12">
          <el-form-item label="震级">{{ form.hsdSgrade }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发震时间" style="width: 100% !important;">{{ form.textHsdTime }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="震中纬度">{{ form.hsdLatitude }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="震中经度">{{ form.hsdLongitude }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="震源深度 (km)">{{ form.hsdSdepth }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="震中烈度">{{ form.hsdSintensity }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="精度">{{ form.hsdPrecision }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参考地名">{{ form.hsdReferencename }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
const props = defineProps({
  form: {
    default: {},
    type: Object,
  },
});

const { form } = toRefs(props);
console.log(form);
</script>

<style lang="scss" scoped>
.detail {
  width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 40px;

  h1 {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    color: rgb(16, 124, 229);
  }

  .descriptions {
    margin-left: 100px;

    td {
      width: 350px;

      span {
        display: inline-block;
      }

      .label {
        text-align: right;
        display: inline-block;
        color: #606266;
        font-weight: 700;
        height: 32px;
        width: 140px;
        padding-right: 14px;
      }
    }
  }
}
</style>